<template>
  <div class="listcontent">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first"
        ><el-table :data="tableDataAll" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180" ref="index">
          </el-table-column>
          <el-table-column prop="detail" label="任务描述" width="180">
          </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column prop="time" label="完成时间"> </el-table-column>

          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <el-button
                type="success"
                class="finishBtn"
                @click="finishFn(scope)"
                >完成</el-button
              >

              <el-popconfirm title="这是一段内容确定删除吗？">
                <el-button slot="reference" class="deleteBtn" @click="deleteTask(scope)">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table></el-tab-pane
      >
      <el-tab-pane label="未完成" name="second"
        ><el-table :data="tableDataUnfinished" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="detail" label="任务描述" width="180">
          </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column prop="time" label="完成时间"> </el-table-column>
          <el-table-column prop="action" label="操作">
          </el-table-column> </el-table
      ></el-tab-pane>
      <el-tab-pane label="已完成" name="third"
        ><el-table :data="tableDataFinished" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="detail" label="任务描述" width="180">
          </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column prop="time" label="完成时间"> </el-table-column>
          <el-table-column prop="action" label="操作">
            <a href="javascript:;">1</a>
          </el-table-column>
        </el-table></el-tab-pane
      >
    </el-tabs>
    <div class="block">
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["eventbus"],
  data() {
    return {
      activeName: "second",
      tableDataAll: null,
      tableDataUnfinished: [],
      tableDataFinished: [],
    };
  },
  
  methods: {
    deleteTask(num){
      console.log(num);
      let self_this = this;
      this.$axios.get('/deleteTasks',{
        params:{
          id:num.row.id
        }
      }).then((res)=>{
        
        console.log(1,res.data);
        self_this.tableDataAll = res.data;
        self_this.tableDataUnfinished = res.data.filter(item=>item.state=="未完成");
        self_this.tableDataFinished = res.data.filter(item=>item.state=="已完成");
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    addEvent(name, time,id) {
      console.log(time);
      this.tableDataAll.push({
        id: id,
        detail: name,
        state: "未完成",
        time: time,
      });
      this.tableDataUnfinished.push({
        id: id,
        detail: name,
        state: "未完成",
        time: time
      });
      
      
    },
    //点击完成按钮所作的操作
    finishFn(num) {
      this.$axios.get('/changeTasks',{
        params:{
          id:num.$index
        }
      })
      //先遍历All数组
      console.log(num);
      this.tableDataAll.forEach((item) => {
        if (item.id == num.$index + 1) {
          item.state = "已完成";
        }
      });
      this.tableDataUnfinished.forEach((item) => {
        if (item.detail == num.row.detail) {
          item.state = "已完成";
        }
      });
      //去除未完成中的已完成
      this.tableDataUnfinished = this.tableDataUnfinished.filter((item) => {
        console.log(item);
        return item.state === "未完成";
      });
      //给已完成中添加
      for (let i = 0; i < this.tableDataFinished.length; i++) {
        if (this.tableDataFinished[i].id === this.tableDataAll[num.$index].id) {
          return;
        }
      }
      this.tableDataFinished.push(this.tableDataAll[num.$index]);

      console.log(
        this.tableDataAll,
        this.tableDataUnfinished,
        this.tableDataFinished
      );
    },
  },
  created() {
    let self_this = this;
    this.$axios.get('/getTasks').then((res)=>{
         console.log(res.data);
        self_this.tableDataAll = res.data;
        self_this.tableDataUnfinished = res.data.filter((item)=>item.state=="未完成");
        self_this.tableDataFinished = res.data.filter((item)=>item.state=="已完成");
         let arr = [];
    self_this.tableDataAll.forEach((item) => {
      if (item.state === "未完成") {
        arr.push(item);
      }
    });
    console.log(arr);
    self_this.tableDataUnfinished = arr;
    })
    
    //
  },
  mounted() {
    this.eventbus.$on("addEvent", this.addEvent);
  },
};
</script>

<style>
.block .el-pagination {
  padding-left: 280px;
}
.cell {
  text-align: center;
}
.cell .finishBtn {
  text-align: center;
  margin-bottom: 10px;
}
.deleteBtn {
  margin-left: 10px;
  text-align: center;
}
</style>